<template>
    <div class="register">
        <div class="login_header">
            <img src="../../assets/img/login/back.png" alt="" @click="goBack">
            注册账号
        </div>
        <div class="login_form">
            <div class="userName">
                <input type="text" placeholder="请输入手机号" v-model.trim="register.userName">
                <img @click="clear()" src="../../assets/img/login/clear.png" alt="">                                                                            
            </div>
            
            <div class="userName">
                <input type="password" placeholder="请输入密码" v-model.trim="register.password">
            </div>
            <div class="userName">
                <input class="code" type="text" placeholder="验证码" v-model.trim="register.smsCode"><span
                    @click="getCode()"
                    class="count_down count_down1" v-if="!msgCode">获取验证码</span>
                    <span class="count_downs count_down" v-else>{{countDownNum}}s后再次获取</span>
            </div>
            <div class="login_bt" @click="doRegister()"  :class="{active:register.password&&register.userName&&register.smsCode}">确定</div>
            <div class="go_register" style="color: #333"><input type="checkbox" name="agreement" v-model="agreement"/>
                	我已阅读并同意
                <router-link :to="{path:'/agreement'}">《用户使用协议》</router-link>
            </div>
        </div>
        
    </div>
</template>

<style>
    @import url("./login.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'

    export default {
        data() {
            return {
                register: {userName: "", smsCode: "", password: ""},
                check_menu: 0,
                countDown: '',
                backUrl:this.$route.query.backUrl,
                agreement : "",
                msgCode:false,
                countDownNum:60,
            }
        },
        created() {
             window.scrollTo(0,0);
        },
        beforeDestroy(){
        	  clearInterval(this.countDown);
        },
        mounted() {
          $('.register').css('height',$(window).height()+'px')
        },
        methods: {
            clear() {
                this.register.userName = ""
            },
            goBack() {
                this.$router.goBack()
            },
            checkMenu(type) {
                this.check_menu = type;
            },
            doRegister() {
                if (!this.register.userName) {
                  Layer.showMsg("请输入电话")
                    return
                }
                if (!Validate.phoneRule(this.register.userName)) {
                    Layer.showMsg("手机格式不正确")
                    return
                }
                if (!this.register.smsCode) {
                    Layer.showMsg("请输入验证码")
                    return
                }
                if (!this.register.password) {
                    Layer.showMsg("请输入密码")
                    return
                }
                console.log(this.register.password)
                console.log(Validate.passwordRule(this.register.password))
                if(this.register.password.length<6||this.register.password.length>20||(!Validate.passwordRule(this.register.password))){
                  Layer.showMsg("请输入6至20位数字与字母的组合");
                  return
                }
                if(!this.agreement){
                    Layer.showMsg("请确认用户使用协议");
                    return
                }
                let url = API.serviceDomain + API.register;
                this.$http.post(url, this.register).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            Layer.showMsg("注册成功");
                            this.$router.replace({path: '/login',query:{'backUrl':this.backUrl}});
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("网络错误: 注册失败，请稍候尝试.")
                        return
                    }
                )
            },
            getCode() {
                if (!this.register.userName) {
                    Layer.showMsg("请输入电话")
                    return
                }
                if (!Validate.phoneRule(this.register.userName)) {
                    Layer.showMsg("手机格式不正确")
                    return
                }
                this.msgCode=true;
                let that = this;
                this.countDown = setInterval(function () {
                    that.countDownNum--;
                    if (that.countDownNum <= 0) {
                        that.msgCode=false;
                        that.countDownNum=60;
                        clearInterval(that.countDown);
                    }
                }, 1000);
                let url = API.serviceDomain + API.registerSendCode + "?phone=" + this.register.userName;
                this.$http.get(url).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            Layer.showMsg("请注意查收短信验证码");
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("网络错误: 短信发送失败，请稍候尝试.")
                        return
                    }
                )
            },

        }
    }
</script>
